<template>
  <div>
    <a-modal
      title="操作回执编号"
      v-model="visible"
      :width="1100"
      @cancel="onCancel"
    >
      <a-alert show-icon type="warning" message="本操作仅针对商标注册，非常规业务无效，谨慎操作" />
      <p></p>
      <a-form-model
        :model="searchForm"
      >
        <a-form-model-item label="文字商标">
          <a-input-search :loading="loading" placeholder="请输入要操作的注册商标名称，如：天猫" enter-button @search="onSearch" />
        </a-form-model-item>
        <a-form-model-item label="其他商标">
          <a-input-search :loading="loading" placeholder="图形商标请输入申请主体" enter-button @search="onSearch" />
        </a-form-model-item>
      </a-form-model>
      <a-table
        bordered
        size="middle"
        :loading="loading"
        :row-key="(record) => record.cb_id"
        :columns="searchColumns"
        :data-source="searchData"
        :pagination="false"
      >
        <!--        <template slot="title">-->
        <!--          <a-upload-->
        <!--            accept=".rar"-->
        <!--          >-->
        <!--            <a-button size="small" icon="upload" type="primary">点击上传压缩包</a-button>-->
        <!--          </a-upload>-->
        <!--        </template>-->
        <template slot="title">
          查询结果
        </template>
        <template slot="type" slot-scope="text">
          <a-tag color="red">{{text}}</a-tag>
        </template>
        <template slot="sb_name" slot-scope="text,record">
          <div v-if="record.type == '文字'">{{text}}</div>
          <div v-else>
            <img width="50" height="50" src="https://gw.alipayobjects.com/zos/antfincdn/XAosXuNZyF/BiazfanxmamNRoxxVxka.png">
          </div>
        </template>
        <template slot="sb_reg_no" slot-scope="text">
          <a-input :value="text" type="text" style="width:200px" placeholder="扫描PDF文件的注册号"></a-input>
          <a-button type="link" icon="edit"></a-button>
        </template>
        <template slot="action" slot-scope="text,record">
          <a-button size="small" type="link" icon="edit" @click="onEdit(record.cb_id)">编辑</a-button>
        </template>
      </a-table>
    </a-modal>
    <a-modal
      title="上传回执压缩包"
      v-model="uploadVisible"
    >
    </a-modal>
  </div>
</template>

<script>
import trademarkColumns from '@/columns/tm.process'
import apis from '@/api'
import storage from 'store'
import { ACCESS_TOKEN } from '@/store/mutation-types'
import { editReg, searchTrade, uploadRec } from '@/api/tm.process'

export default {
  name: 'BatchAction',
  data () {
    return {
      loading: false,
      inputVisible: false,
      visible: true,
      searchForm: {},
      searchColumns: trademarkColumns.batch_set2,
      searchData: [
        {
          type: '文字',
          contract_no: 'HT20220323CPSWPN',
          sb_name: '天猫',
          apply: '淘宝',
          sb_category: '4',
          sb_reg_no: ''
        },
        {
          type: '文字',
          contract_no: 'HT20220323IQIYU7',
          sb_name: '天猫',
          apply: '淘宝',
          sb_category: '5',
          sb_reg_no: '12345678'
        },
        {
          type: '图形',
          contract_no: 'HT20220323IQIYU7',
          sb_name: '',
          apply: '淘宝',
          sb_category: '5',
          sb_reg_no: '12345678'
        }
      ],
      inputForm: {},
      inputRules: {
        official_order_no: [
          { required: true, message: '必须扫描20位官方回执编号', trigger: 'blur' },
          { length: 20, message: '官方回执编号长度有误', trigger: 'blur' }
        ],
        sb_reg_no: [
          { required: true, message: '注册号未识别到', trigger: 'blur' },
          { length: 6, message: '注册号未识别到', trigger: 'blur' }
        ]
      },
      tab: 1,
      uploadUrl: apis.Upload,
      headers: {
        'Access-Token': storage.get(ACCESS_TOKEN)
      },
      uploadForm: {},
      uploadVisible: false
    }
  },
  methods: {
    onCancel () {
      this.visible = false
      this.$emit('cancel', this.visible)
    },
    onSearch (value) {
      this.loading = true
      this.searchForm['filter[sb_name]'] = value
      searchTrade(this.searchForm).then(res => {
        this.searchData = res.result.data
      }).finally(() => {
        this.loading = false
      })
    },
    onEdit (id) {
      this.inputForm['cb_id'] = id
      this.inputVisible = true
    },
    onBlur () {
      const str = this.inputForm.official_sb_reg_no
      this.$set(this.inputForm, 'sb_reg_no', str.slice(15, 23))
    },
    onSubmit () {
      const app = this
      const data = {}
      app.$refs.inputForm.validate(valid => {
        if (valid) {
          data['contractBusiness[official_sb_reg_no]'] = this.inputForm.official_sb_reg_no
          data['contractBusiness[sb_reg_no]'] = this.inputForm.sb_reg_no
          editReg(this.inputForm.cb_id, data).then(res => {
            if (res.status === 0) {
              this.onSearch(this.searchForm['filter[sb_name]'])
              this.inputForm = {}
              this.inputVisible = false
            }
          })
        } else {
          return false
        }
      })
    },
    onUpload () {
      this.uploadVisible = true
    },
    onChange (info) {
      if (info.file.status === 'uploading') {
        return false
      }
      if (info.file.status === 'done') {
        this.uploadForm['file[filename]'] = info.file.name
        this.uploadForm['file[value]'] = info.file.response.result.url
        uploadRec(this.uploadForm).then(res => {
          if (res.status === 0) {
            this.onSearch(this.searchForm['filter[sb_name]'])
          }
        })
      }
    }
  }
}
</script>

<style scoped>
  .container {
    width: 1200px;
    margin: 0 auto;
  }
</style>
